<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/base.css"/>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<title></title>
	</head>
	<body>
		<div class="music musicMove">
			<audio src="src/Alan Walker - Fade.mp3" autoplay="autoplay" loop="loop" preload="auto" class="musics"></audio>
		</div>
		<div class="arrowUp AupDown">
				<img src="img/08d523_79_74.png" />
			</div>
			
	<div class="scroll-main">
		
			
		<div class="page01 active">
			<div class="points">			
			</div>
			<div class="bot-ball bounceInDown">
				<img src="img/703e2a_951_401.png" />
			</div>
			
			<div class="ufo bounceInRightTobreath">
				<img src="img/60ebc8_330_112.png" />
			</div>
			<div class="star-ball01 bounceInRightTobreath">
				<img src="img/523cd6_123_72.png" />
			</div>
			<div class="star-ball02 bounceInLeftTobreath">
				<img src="img/5867e8_172_161.png" />
			</div>
			<div class="per fadeInDown">
				<img src="img/db240a_277_284.png" />
			</div>
			<div class="message fadeInDown">
				<img src="img/mes.png" />
			</div>
			<div class="mes-txt1 fadeInDown">
				<img src="img/mes-txt1.png" />
			</div>
			<div class="mes-txt2 bounceInRight">
				<img src="img/mes-txt2.png" />
			</div>
			<div class="red-stone rollIn">
				<img src="img/zhuang.png" />
			</div>
			
		</div>
		<div class="page02" style="opacity: 0;">
			<div class="page02-start start01 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start02 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start03 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start04 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start05 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start06 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start07 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start08 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start08 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start10 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start11 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start12 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start13 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start14 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start15 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="blue-ball bounceInUp">
				<img src="img/45611a_506_169.png" />
			</div>
			<div class="cat upDown">
				<img src="img/ec014f_586_665.png" />
			</div>
			<div class="sun bounceInRight">
				<img src="img/48b258_280_280.png" />
			</div>
		</div>
		<div class="page03" style="opacity: 0;">
			<div class="page03-top">
				<img src="img/45611a_506_169.png" />
			</div>
			<div class="per-info">
				<img src="img/ziliaoxinxi.png" />
			</div>
			<div class="page03-r breath">
				<img src="img/ddfef9_379_178.png" />
			</div>
			<div class="page03-p breath">
				<img src="img/db240a_277_284.png" />
			</div>
			<div class="p3-name">
				<img src="img/name.png" />
			</div>
			<div class="p3-age">
				<img src="img/age.png" />
			</div>
			<div class="p3-sex">
				<img src="img/sex.png"  />
			</div>
			<div class="p3-pos">
				<img src="img/pos.png" />
			</div>
			<div class="p3-edu">
				<img src="img/edu.png" alt="" />
			</div>
			<div class="p3-tel">
				<img src="img/tel.png" alt="" />
			</div>
			<div class="p3-qq">
				<img src="img/qq.png" />
			</div>
			<div class="p3-email">
				<img src="img/email.png" />
			</div>
			<div class="page02-start start01 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start02 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start03 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start04 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start05 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start06 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start07 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start08 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start08 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start10 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start11 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start12 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start13 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start14 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start15 fade">
				<img src="img/207cba_29_29.png" />
			</div>
		</div>
		<div class="page04" style="opacity: 0;">

			<div class="page02-start start01 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start02 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start03 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start04 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start05 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start06 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start07 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start08 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start08 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start10 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start11 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start12 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start13 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start14 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="page02-start start15 fade">
				<img src="img/207cba_29_29.png" />
			</div>
			<div class="blue-ball bounceInUp">
				<img src="img/45611a_506_169.png" />
			</div>
			
			<div class="sun bounceInRight">
				<img src="img/48b258_280_280.png" />
			</div>
			<div class="small-ufo">
				<img src="img/b030a3_361_246.png" />
			</div>
			<div class="page4-star">
				<img src="img/5779c1_528_456.png" alt="" />
			</div>
			<div class="p4-title">
				<img src="img/zdsx.png" />
			</div>
			<div class="sx sx01 fade2">
				js
			</div>
			<div class="sx sx02 fade2">
				jQuery
			</div>
			<div class="sx sx03 fade2">
				git/GitHub
			</div>
			<div class="sx sx04 fade2">
				css/css3
			</div>
			<div class="sx sx05 fade2">
				HTML5
			</div>
			<div class="sx sx06 fade2">
				PS
			</div>
			<div class="sx sx07 fade2">
				AI
			</div>
			<div class="sx sx08 fade2">
				Bootstrap
			</div>
			<div class="sx sx09 fade2">
				Less
			</div>
			<div class="sx sx10 fade2">
				vue.js
			</div>
			<div class="sx sx11 fade2">
				W3C标准
			</div>
			<div class="sx sx12 fade2">
				移动web
			</div>
			<div class="sx sx13 fade2">
				响应式
			</div>
			<div class="sx sx14 fade2">
				原生Touch
			</div>
			<div class="sx sx15 fade2">
				网页/UI设计
			</div>
		</div>
	</div>
	</body>
</html>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
window.onload=function(){
   		setSize();
   		var musicBtn=document.querySelector(".music");
   		var musics=document.querySelector('.musics');  		
   		var musicFlag=0;
   		musicBtn.addEventListener('touchstart',
   		function(){
   			if(musicFlag==0){
   				musicFlag=1;
   				musics.pause();
   				//$('.music').removeClass('musicMove');
   				remove_Class(musicBtn,'musicMove');
   				
   			}else{
   				musicFlag=0;
   				musics.play();
   				//$('.music').addClass('musicMove');
   				add_Class(musicBtn,'musicMove');
   			}
   		},false);
   	//开始播放音乐，关闭音乐；	
   	
   	
   
   }
    var pixelRatio=1/window.devicePixelRatio;
    var ohtml=document.querySelectorAll('html')[0];
    window.addEventListener('resize',setSize);
    document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'"/>');
	function setSize(){
		    htmlW=ohtml.getBoundingClientRect().width;
	        ohtml.style.fontSize=htmlW/16+'px';
	        
	};//移动端页面的设置初始化 
      
   
   var _sun=document.querySelector('.sun');
    _sun.addEventListener('animationend',function(){
    	add_Class(this,'rotateAlways');
    	remove_Class(this,'bounceInRight');
    })//page02 动画效果
    
    
   /* $('.sun').bind('animationend',function(){
    	$(this).addClass('rotateAlways').removeClass('bounceInRight');
    });*///page02 动画效果
</script>
<script>
function add_Class(ele,className){
  if(ele.className==''){
	ele.className+=className;  
   }else{
	var aEleClassName=ele.className.split(' ');
	var aNewClassName=className.split(' ');////
	
	/*for(var i=0;i<aEleClassName.length;i++){
	  if(aEleClassName[i]!=className){
		  ele.className+=' '+className;
		  }	
	 }   *////这个只能一次加一个样式,加多个的话会出现重复
	 
	 for(var i=0;i<aEleClassName.length;i++){
        for(var j=0;j<aNewClassName.length;j++){
			if(aEleClassName[i]!=aNewClassName[j]){
				ele.className+=' '+aNewClassName[j];
				}
			}
	   }////可以加多个样式，不重复
   }
}


function remove_Class(obj,cls){
	var aObj_class=obj.className.split(' ');
	if(obj.className==''){
		return;
	}else{
		for(var i=0;i<aObj_class.length;i++){
			if(aObj_class[i]==cls){
				aObj_class.splice(i,1);
			};
		};
		obj.className=aObj_class.join(' ');
	};
}


	
</script>
<script>

var phoneH=ohtml.getBoundingClientRect().height;
document.addEventListener('touchstart',function(ev){
	ev.preventDefault();
})//阻止默认事件；
var scrollMain=document.querySelector('.scroll-main');
   	var page=document.querySelectorAll('.scroll-main>div');
   	var num=0;
   	var startY=null;
   	var topFlag=null;
   	var moveY=null;
   	scrollMain.addEventListener(
   		'touchstart',
   		function(ev){
   			var touches=ev.changedTouches[0];
   			
   		    startY=touches.pageY; 
   		}
   	);
   	add_Class(page[0],'bb');
   	scrollMain.addEventListener(
   		'touchmove',
   		function(ev){
   			var touches=ev.changedTouches[0]
   			var moveX=touches.pageX;
   			moveY=touches.pageY;
   			var dis=moveY-startY;
   			
   			if(startY<moveY){
   				 if(startY<moveY&&num==0){
   				    topFlag=0;
   				    return 
   			   }else{
   			   	page[num].style.transition='none';
   			   	page[num-1].style.transition='none';
   			   	page[num].style.top=dis+'px';
   			    page[num-1].style.top=dis-phoneH+'px';
   			   	topFlag=1;
   			   };
   			}else if(startY>moveY){
   				page[num].style.transition='none';
   				topFlag=1;
   				 page[num].style.top=dis+'px';
   			}
   		}
   	);
   	scrollMain.addEventListener(
   		'touchend',
   		function(ev){
   			if(topFlag){
   				if(startY<moveY){
   					if(num<=0){
   					  num=0
   				    }
   				
   					
   					page[num-1].style.transition='.5s';
   					page[num-1].style.top=0;
   					page[num].style.top=0;
   					remove_Class(page[num],'active');
   					add_Class(page[num-1],'active')
   					num--;
   					for(var i=0;i<page.length;i++){
   						page[i].style.opacity=0;
   					}
   					page[num].style.opacity=1;
   					
   				}else if(startY>moveY){
   					page[num].style.transition='.5s';
   					page[num].style.top=-phoneH+'px';
   					num++;
   						if(num>=3){
   					       num=3
   					       page[num].style.top=0+'px';
   					       remove_Class(page[num-1],'active');
   				        }
   					remove_Class(page[num-1],'active');
   					add_Class(page[num],'active');
   					for(var i=0;i<page.length;i++){
   						page[i].style.opacity=0;
   					}
   					page[num].style.opacity=1;
   				}
   			}
   			//var touches=ev.changedTouches[0]
   			//console.log(111)
   		}
   	);
    /* $('.red-stone').bind('animationend',function(){
   			$('.mes-txt2').removeClass('bounceInRight').css('transform','rotate(-15deg) translate(-10px,-5px)');//需要先将animation删除后面才会起作用
   			
   			$('.ufo,.star-ball01').removeClass('bounceInRightTobreath').addClass('breath');
   			$('.star-ball02').removeClass('bounceInLeftTobreath').addClass('breath');
   			$('.per').removeClass('fadeInDown').addClass('breath');
   		});//page01 里面的动画效果*/
   
</script>